<template>
	<view class="ceratOrder">
		<view class="address" @tap="goAddress" v-if="!isHaveAddress">
			<view class="left">
				<image src="../../static/images/addre.png" mode="widthFix"></image>添加收货地址
			</view>
			<image src="../../static/images/more_icon.png" mode="widthFix"></image>
		</view>
		
		<view class="address" @tap="goAddress" v-if="isHaveAddress">
			<view class="left">
				<image src="../../static/images/addre.png" mode="widthFix"></image>
				<view>
					<view class="top">
						<text class="userName">{{addressData.userName}}</text>
						<text class="phone">{{addressData.mobile}}</text>
					</view>
					<view class="bottoms">
						{{addressData.address + addressData.detailAddress}}
					</view>
				</view>
			</view>
			<image src="../../static/images/more_icon.png" mode="widthFix"></image>
		</view>
		
		<view class="commodityInfo" v-for="(item,index) in data.storeList" :key="index">
			<view class="shopName">
				<image src="../../static/images/shop_icon_1.png" mode="widthFix"></image>
				{{item.storeName}}
			</view>
			
			<view class="commodity" v-for = '(commodity,index2) in item.productList'>
				<image :src="commodity.productPic" mode="scaleToFill"></image>
				<view class="rightInfo">
					<view class="title">
						{{commodity.productName}}
					</view>
					<view class="type">
						{{commodity.productAttr}}
					</view>
					<view class="priceBox">
						<view class="price">
							￥<text>{{commodity.price}}</text>
						</view>
						<text class="size">×{{commodity.productQuantity}}</text>
					</view>
				</view>
			</view>
			<view class="buyInfo">
				<view class="size">
					<text>购买数量</text>
					<text>×{{item.shopCount}}</text>
				</view>
				<view class="size">
					<text>商品运费</text>
					<text>￥{{item.freightAmount}}</text>
				</view>
				<view class="size">
					<text>消费合计</text>
					<text class="price">￥{{parseFloat(item.money.toFixed(2))  + item.freightAmount}}</text>
				</view>
			</view>
		</view>
		
		
		<view class="bottom">
			<view class="commodityNum">
				共{{data.count}}件商品
			</view>
			<view class="totalPrice">
				<text>总计：</text>
				<view class="pirceNum">
					￥<text>{{totalAmount.toFixed(2)}}</text>
				</view>
			</view>
			<view class="submitBtn" @tap="submit">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				data:{},
				addressData:{},
				isHaveAddress:false,
				totalAmount:0,
			}
		},
		onLoad(e) {
			this.getAddress()
			this.data =  JSON.parse(decodeURIComponent(e.data))
			for (let i = 0; i < this.data.storeList.length; i++) {
				this.totalAmount += this.data.storeList[i].money + this.data.storeList[i].freightAmount;
				for (let j = 0; j < this.data.storeList[i].productList.length; j++) {
					this.data.storeList[i].productList[j].props = this.data.storeList[i].productList[j].productAttr;
				}
			}
		},
		onShow() {
			uni.$on('address',data=>{
				this.addressData = data;
				this.isHaveAddress = true;
			})
		},
		methods:{
			getAddress(){
				let data  = {}
				this.$http.post('/api/v1.0/user/address/default',data,res=>{
					console.log(res)
					if(res.data.data == null){
						this.isHaveAddress = false
					}else{
						this.addressData = res.data.data;
						this.isHaveAddress = true;
					}
				})
			},
			goAddress(){
				uni.navigateTo({
					url:'../address/address?type=1'
				})
			},
			submit(){
				if(this.addressData.addressId == undefined){
					uni.showToast({
						title:"请选择收货地址",
						icon:"none"
					})
					return false;
				}
				this.data.addressId = this.addressData.addressId;
				console.log(this.data)
				this.$http.post('/api/v1.0/cart/order',this.data,res=>{
					if(res.data.status == '000000'){
						this.payMoney(res.data.data)
					}else{
						uni.showToast({
							title:res.data.message,
							icon:"none"
						})
					}
				})
			},
			payMoney(ref3thId){
				// #ifdef MP-WEIXIN
					this.WXpayMoney(ref3thId)
				// #endif
				
				// #ifdef MP-TOUTIAO
					this.TTpayMoney(ref3thId)
				// #endif
				
				// #ifdef MP-ALIPAY
					this.ALiPay(ref3thId)
				// #endif
			},
			WXpayMoney(ref3thId){
				let data = {
					orderId :ref3thId,
					payType:"wxpay",
					businessType: 0,
				}
				
				this.$http.post('/api/v1.0/payParam',data,res=>{
					console.log(res)
					if(res.data.status == '000000'){
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.data.timeStamp.toString(),
							nonceStr: res.data.data.nonceStr,
							package: "prepay_id=" + res.data.data.packAge,
							signType: 'MD5',
							paySign: res.data.data.paySign,
							success: function (res) {
								uni.redirectTo({
									url:'../result/result?type=pay'
								})
							},
							fail: function (err) {
								uni.redirectTo({
									url:'myorder?type=1'
								})
							}
						});
					}else{
						uni.showToast({
							title:res.data.message,
							icon:"none"
						})
					}
					
				})
				
			},
			TTpayMoney(ref3thId){
				let data = {
					orderId :ref3thId,
					payType:"alipay",
					businessType: 0,
				}
				this.$http.post('api/v1.0/touTiaoPayParam',data,res=>{
					let orderInfo = {
						    app_id: res.data.data.appId,
						    sign_type: "MD5",
						    out_order_no: res.data.data.outOrderNo,
						    merchant_id: res.data.data.merchantId,
						    timestamp: res.data.data.timestamp,
						    product_code: "pay",
						    payment_type: "direct",
						    total_amount: res.data.data.totalAmount,
						    trade_type: "H5",
						    uid: res.data.data.uid,
						    version: "2.0",
						    currency: "CNY",
						    subject: res.data.data.subject,
						    body: "",
						    trade_time: res.data.data.tradeTime,
						    valid_time: res.data.data.validTime,
						    notify_url: res.data.data.notifyUrl,
						    alipay_url:res.data.data.alipayUrl,
						    sign: res.data.data.sign,
						    risk_info: res.data.data.riskInfo
						}
					if(res.data.status == '000000'){
						uni.requestPayment({
							provider: 'toutiao',
							orderInfo:orderInfo,
							service:4,
							success: function (res) {
								let code = res.code
								if(code == 0){
									uni.redirectTo({
										url:'../result/result?type=pay'
									})
								}else{
									uni.redirectTo({
										url:'myorder?type=1'
									})
								}
								
							},
							fail: function (err) {
								uni.showToast({
									title:'服务器异常~',
									icon:'none'
								})
								console.log('fail:' + JSON.stringify(err));
								// uni.redirectTo({
								// 	url:'myorder'
								// })
							}
						});
					}else{
						uni.showToast({
							title:res.data.message,
							icon:"none"
						})
					}
					
				})
			},
			ALiPay(ref3thId){
				let data = {
					orderId :ref3thId,
					payType:"alipay",
					businessType: 0,
				}
				this.$http.post('api/v1.0/pay',data,res=>{
					if(res.data.status == '000000'){
						uni.requestPayment({
							provider: 'alipay',
							orderInfo:res.data.data,
							success: function (res) {
								if(res.resultCode == '9000'){
									uni.redirectTo({
										url:'../result/result?type=pay'
									})
								}else{
									uni.redirectTo({
										url:'myorder?type=1'
									})
								}
								
							},
							fail: function (err) {
								console.log('fail:' + JSON.stringify(err));
								uni.redirectTo({
									url:'myorder'
								})
							}
						});
					}else{
						uni.showToast({
							title:res.data.message,
							icon:"none"
						})
					}
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.ceratOrder{
		min-height: 100vh;
		position: relative;
		background-color: #f2f2f2;
		padding: 40upx 28upx 120upx;
		box-sizing: border-box;
		.address{
			background-color: #fff;
			border-radius: 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 30upx;
			&>image{
				width: 22upx;
				height: 22upx;
			}
			.left{
				font-size: 28upx;
				color: #333;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				image{
					width: 40upx;
					height: 40upx;
					margin-right: 20upx;
				}
				.top{
					font-size: 28upx;
					color: #333;
					.phone{
						font-size: 24upx;
					}
				}
				.bottoms{
					width: 510upx;
					display: -webkit-box;
					overflow: hidden; 
					white-space: normal!important;
					text-overflow: ellipsis;
					word-wrap: break-word; 
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
		
		.commodityInfo{
			background-color: #fff;
			border-radius: 30upx;
			padding: 0 30upx 30upx;
			margin-top: 20upx;
			.shopName{
				height: 90upx;
				font-size: 28upx;
				display: flex;
				align-items: center;
				border-bottom: 1upx solid #f2f2f2;
				image{
					width: 40upx;
					height: 40upx;
					margin-right: 20upx;
				}
			}
			.commodity{
				display: flex;
				justify-content: space-between;
				margin-top: 20upx;
				&>image{
					width: 200upx;
					height: 200upx;
					margin-right: 20upx;
				}
				.rightInfo{
					width: 410upx;
					.title{
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 24upx;
						color: #333; 
					}
					.type{
						font-size: 22upx;
						color: #999999;
						margin-top: 20upx;
					}
					.priceBox{
						display: flex;
						justify-content: space-between;
						margin-top: 50upx;
						.price{
							font-size: 24upx;
							font-weight: bold;
							text{
								font-size: 32upx;
							}
						}
						.size{
							font-size: 24upx;
							color: #333;
						}
					}
				}
			}
			.buyInfo{
				background-color: #fff;
				border-radius: 30upx;
				padding: 20upx 30upx 30upx;
				margin-top: 20upx;
				&>view{
					border-bottom: 1upx solid #f2f2f2;
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 66upx;
					font-size: 28upx;
				}
				.size{
					.price{
						color: #F63810;
					}
				}
			}
		}
		
		.bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding-left: 30upx;
			box-sizing: border-box;
			.submitBtn{
				height: 100%;
				background:linear-gradient(0deg,rgba(232,39,27,1),rgba(250,94,52,1));
				color: #fff;
				font-weight: bold;
				font-size: 36upx;
				text-align: center;
				line-height: 100upx;
				width: 275upx;
			}
			.totalPrice{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-right: 30upx;
				font-size: 28upx;
				font-weight: bold;
				.pirceNum{
					color: #f63810;
					font-size: 22upx;
					text{
						font-size: 28upx;
					}
				}
			}
			.commodityNum{
				font-size: 28upx;
				color: #999;
			}
		}
	}
</style>
